Question

我在我的grunt设置中使用grunt-svgstore来从svg创建一个svg精灵文件，我添加到我的项目中。

输出是这样的。

FBRequest *meRequest=[[FBRequest alloc]initWithSession:self.session graphPath:[NSString stringWithFormat:@"me"]parameters:@{@"fields":@"name,email"} HTTPMethod:@"GET"];
[meRequest startWithCompletionHandler:
 ^(FBRequestConnection *connection,
   NSDictionary* result,
   NSError *error)
 {
     fbCompletion(result,error);
 }];

在我的文档顶部，我正在添加对svg文件的引用。

    <svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->    <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>

什么是最好的方式或如何在页面上显示svg。我正在尝试这样的事情。

    <?php include_once("images/svg/processed/svg-defs.svg"); ?>

Answer 1

要使用<symbol>元素引用<use>元素。

您应该在文档顶部包含带有符号的SVG。实际上它可以去任何地方，但我相信Safari有一个错误，要求定义在引用它们之前。

您需要隐藏符号定义SVG，使其不可见。要做到这一点，可以使用display="none"或设置width="0" height="0"。

然后引用该符号，使用<use>元素创建所需大小的另一个SVG。

<svg width="40px" height="40px">
  <use xlink:href="#shape-times"/>
</svg>

您可以如上所述明确设置大小，或使用CSS，如下例所示。

＆＃13;

.large {
  width: 40px;
  height: 40px;
}

.small {
  width: 24px;
  height: 24px;
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" display="none"><symbol viewBox="0 0 32 32" id="shape-times"><title>times</title><desc>Created with Sketch.</desc> <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->    <g id="times-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="times-times" sketch:type="MSArtboardGroup" fill="#B7C0C7"> <path d="M17.4142136,16 L23.7764339,9.63777963 C24.1745374,9.23967616 24.1686989,8.6123497 23.7781746,8.22182541 C23.3849276,7.82857845 22.753706,7.83208044 22.3622204,8.22356607 L16,14.5857864 L9.63777963,8.22356607 C9.23967616,7.8254626 8.6123497,7.83130112 8.22182541,8.22182541 C7.82857845,8.61507236 7.83208044,9.246294 8.22356607,9.63777963 L14.5857864,16 L8.22356607,22.3622204 C7.8254626,22.7603238 7.83130112,23.3876503 8.22182541,23.7781746 C8.61507236,24.1714215 9.246294,24.1679196 9.63777963,23.7764339 L16,17.4142136 L22.3622204,23.7764339 C22.7603238,24.1745374 23.3876503,24.1686989 23.7781746,23.7781746 C24.1714215,23.3849276 24.1679196,22.753706 23.7764339,22.3622204 L17.4142136,16 L17.4142136,16 Z" sketch:type="MSShapeGroup"/> </g> </g> </symbol></svg>

<svg width="40px" height="40px">
  <use xlink:href="#shape-times"/>
</svg>

<svg class="large">
  <use xlink:href="#shape-times"/>
</svg>

<svg class="small">
  <use xlink:href="#shape-times"/>
</svg>

＆＃13;

从svg sprite添加svg到页面

1 个答案: