时间戳

首页 > 解决方案 > 如何在 SVG 中居中和扩展内容？

html - 如何在 SVG 中居中和扩展内容？

问题描述

我无法确定如何使用 viewPort 属性准确调整 SVG 的显示。

我希望 SVG 包含 800 像素宽的空间，并以很少或没有填充为中心。我看到 min-x 和 min-y 选项似乎可以控制 svg 的位置，但我没有运气试图让 SVG 占用更多的可用屏幕空间（没有填充）。当我增加 viewBox 的宽度和高度时，svg 实际上会缩小。

<svg 
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" id="us-map" 
    preserveAspectRatio="xMinYMin meet" 
    sodipodi:docname="southeast.svg" 
    inkscape:version="0.91 r13725" 
    x="0px" 
    y="0px" 
    width="600px" 
    height="550px" 
    viewBox="500 200 600 550" 
    enable-background="new 500 200 600 550" 
    xml:space="preserve"
>

我的例子在这里：https ://jsfiddle.net/u5zmarqn/

标签： htmlcsssvgviewbox

解决方案

推荐阅读