css – 如何准备一个Inkscape SVG文件进行响应式网页设计？

我在Treehouse上做了一个响应式网页设计的教程.在本教程的这一点上,我们被要求将一个图像转换为一个svg,以便它可以完全响应性地扩展.

而不是使用我不拥有的Adobe Illustrator,而是使用了免费的Inkscape.一旦图像被转换,我们被要求在文本编辑器中打开图像,并从svg声明中移除高度和宽度要求,并将对象选择器添加到我们的最大宽度规则到我们的样式css：

img,object {
max-width: 100%;
}

但是,删除高度和宽度后,图像没有响应,而是像这样奇怪地剪辑：

有谁知道我做了什么错误？或者我应该删除什么？

对不起,如果问题提出之前,我找不到.

edit1,代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-Syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   width="319"
   height="177"
   sodipodi:docname="logo.gif">
  <Metadata
     id="Metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </Metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     width="319"
     height="177"
     xlink:href="

这是我已经删除的第一个SVG标签中的“height”和“width”.

解决方法

事实上,您刚刚将光栅图像放在SVG中并不是您看到的真正原因.

这意味着当SVG的缩放工作正常(见下文)时,您将看不到使用矢量图形的好处.当您扩展矢量图形时,您不会在扩展位图时获得您所获得的“锯齿”(块).如果您的SVG仅包含位图,则与使用位图几乎相同.

这里的实际问题是Inkscape在其保存的SVG中不包含viewBox 属性.

删除“width”和“height”属性时,它们默认为“100％”.这告诉浏览器缩放SVG以适应父容器.不幸的是,为了缩放工作,浏览器需要知道SVG内容的尺寸.这就是viewBox 属性.

Illustrator添加了viewBox 属性,Inkscape没有.

要查看我的意思,请将以下内容添加到您的< svg>删除宽度和高度后的标签：

viewBox="0 0 319 177"

您应该会发现,您的图像不再被剪辑,并且将在页面调整大小时调整大小.

css – 如何准备一个Inkscape SVG文件进行响应式网页设计？

解决方法

猜你在找的CSS相关文章