包括SVG文件并更改它的高度

时间:2015-07-30 02:36:13

标签: php svg include

我有一个SVG文件,我希望使用php include 'svg/file.svg';来包含,我希望能够在包含它时为该SVG设置高度。

所以我认为我做了一个功能:

function importSVG($file, $height) {
    $svg = file_get_contents($file);

    // magic to set height?

    return $svg;
}

但是我无法弄清楚如何设置height属性。我或许可以每页使用此功能20-30次。所以我不想成为整个SVG代码的正则表达式,因为一些svg文件很大。

示例SVG文件:

<svg><path d="M.524 7.42C-.318 8.846.342 10 2 10h7c1.657 0 2.317-1.156 1.476-2.58L6.516.72c-.56-.95-1.473-.947-2.032 0l-3.96 6.7z"></path></svg>

1 个答案:

答案 0 :(得分:0)

您可以避免修改SVG,如果您使用符号技术,则只需在页面中包含一次。

确保您的SVG有一个viewBox并将其转换为如下符号:

#include<stdio.h>
int main()
{
  int a[9],number;
  scanf("%d",&number);
  int i;
  for(i=0;i<9;i++)
  {
    a[i]=-1;
  }
  int temp=0,digit=0,index=0;
  temp=number;
  while(temp!=0)
  {
    digit=(temp%10);
    a[index]=digit;
    index=index+1;
    temp=temp/10;
  }
  int size=0,checksize=-1;
  i=0;
  for(i=0;i<9;i++)
  {
    if(a[i]==-1)
    {
      size=i;
      checksize=0;
      break;
    }
  }
  if(checksize==-1)
    size=9;
  int isAWrapAround=0;
  int x=0,count=size-1,remaining=0,arraysize=size;
  for(i=(arraysize-1);i>=0;i--)
  {
    x=a[count];
    a[count]=-1;
    if(x!=-1)
    {
      if(count-x>=0)
      {
        count=count-x;
      }
      else
      {
        remaining=x-count;
        count=0;
        do
        {
          if(remaining<=arraysize)
          {
            count=arraysize-remaining;
            break;
          }
          else
          {
            count=remaining-arraysize;
            remaining=remaining-arraysize;
          }
        }
        while(count>arraysize-1);
      }
    }
    else
    {
      isAWrapAround=-1;
    }
  }
    if(isAWrapAround==0)
    {
      printf("%i is a wraparound number",number);
    }
    else
    {
      printf("%i is not a wraparound number",number);
    }
    return 0;
  }

然后,只要您需要使用它,请将以下内容添加到您的页面中:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">

  <symbol id="my-icon" viewBox="0 0 100 100">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

该类定义为:

<svg class="icon-small">
  <use xlink:href="#my-icon" />
</svg>

然后,如果您需要更大的版本,您可以执行以下操作:

.icon-small {
  width: 32px;
  height: 32px;
}

&#13;
&#13;
<svg class="icon-large">
  <use xlink:href="#my-icon" />
</svg>

.icon-large {
  width: 48px;
  height: 48px;
}
&#13;
.icon-small {
    width: 32px;
    height: 32px;
}

    
.icon-large {
    width: 48px;
    height: 48px;
}
&#13;
&#13;
&#13;